<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-07-23 13:47:54
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-28 16:52:58
-->
<template>
  <div class="container">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <div class="mainConTree">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="mainConContent">
        <div v-if="!chosedPartment">
          <el-button>增加部门</el-button>
        </div>
        <div v-else>
          <div class="mainConContentBtn">
            <div class="mainConContentBtnInfo">
              {{ chosedPartment }}{{ parmentPerson }}人
            </div>
            <el-link @click="editPartment">修改名称</el-link>
            <span class="line"></span>
            <el-link @click="addNextPartment">添加下级</el-link>
            <span class="line"></span>
            <el-link @click="deletePartment">删除部门</el-link>
          </div>
          <div class="mainConContentAction">
            <el-button
              class="commonBtn saveBtn funComBut"
              icon="icon iconfont icontianjia"
              type="primary"
              v-sdc
              @click="addImployee"
              >添加人员</el-button
            >
            <el-button
              class="commonBtn funComBut"
              icon="icon iconfont iconxiangmuguanli"
              type="primary"
              @click="changePartment"
              v-sdc
              >调整部门</el-button
            >
            <el-button
              class="commonBtn funComBut"
              icon="icon iconfont icondaochu"
              type="primary"
              v-sdc
              >导出报表</el-button
            >
            <el-button
              class="commonBtn funComBut"
              icon="icon iconfont icondaochu"
              type="primary"
              v-sdc
              @click="toExportImployees"
              >批量导入员工</el-button
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="需要添加的在职员工数量比较多时，建议使用“批量导入在职员工”功能"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="mainConContentSearch">
            <el-input
              placeholder="搜索员工姓名或身份证号"
              class="input"
            ></el-input>
            <el-checkbox v-model="filterField.noCard"
              >只看无工资卡员工</el-checkbox
            >
            <el-checkbox v-model="filterField.noPaper"
              >只看无合同附件员工</el-checkbox
            >
            <el-button
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              type="primary"
            ></el-button>
          </div>
          <el-table
            :data="tableList"
            empty-text="暂无信息，请及时补充"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec; margin-top: 24px"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
          >
            >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="createTime" label="人员" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.personName }}</div>
                <div>{{ scope.row.IDCard }}</div>
                <div>{{ scope.row.partment }}/{{ scope.row.position }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="joinDate"
              label="录入时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="workDate"
              label="雇佣周期"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="card"
              label="工资卡"
              align="center"
            ></el-table-column>
            <el-table-column prop="reason" label="合同附件" align="center">
              <template slot-scope="scope">
                <el-link type="primary" v-if="scope.row.reason">已上传</el-link>
                <span v-else>未上传</span>
              </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center">
              <template slot-scope="scope">
                <el-link type="primary" @click="look(scope.row)"
                  >编辑工资卡</el-link
                >
                <el-link type="primary" @click="look(scope.row)"
                  >合同附件</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            ref="pagination"
            @getList="getTableList"
            :filterField="filterField"
            :requestUrl="requestUrl"
          ></Pagination>
        </div>
      </div>
    </div>

    <!-- 修改名称弹框 -->
    <el-dialog
      title="修改名称"
      :visible.sync="dialogFormVisible"
      @close="closeDialog('form')"
      width="716px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="当前名称" :label-width="formLabelWidth">
          <span>{{ chosedPartment }}</span>
        </el-form-item>
        <el-form-item
          label="修改为"
          :label-width="formLabelWidth"
          prop="modifyName"
        >
          <el-input
            v-model="form.modifyName"
            autocomplete="off"
            maxlength="32"
            class="inputWidth"
            @blur="form.modifyName = changeValue($event)"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('form')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveModify"
          class="save"
          :loading="canLogin"
          >保存修改</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加下级弹框 -->
    <el-dialog
      title="添加下级部门"
      width="716px"
      :visible.sync="addSubordinate"
      @close="closeDialog('addBox')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <el-form :model="form" :rules="rules" ref="addBox">
        <el-form-item
          label="部门名称"
          :label-width="formLabelWidth"
          prop="departmentName"
        >
          <el-input
            v-model="form.departmentName"
            autocomplete="off"
            maxlength="32"
            class="inputWidth"
            @blur="form.departmentName = changeValue($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级部门" :label-width="formLabelWidth">
          <span>{{ chosedPartment }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('addBox')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="addSubordinateDepart"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 调整部门 -->
    <adjustDepartment
      :showAdjustDepartment="showAdjustDepartment"
      @isShowState="changeData($event)"
      :getTreeData="data"
      :checkedId="choseImployee"
      :gitListData="getTree"
      @checkIds="changeCheckId($event)"
    ></adjustDepartment>
  </div>
</template>
<script>
import adjustDepartment from '@/components/publicCom/adjustDepartment'

export default {
  name: 'inEmployee',
  components: {
    adjustDepartment,
  },
  data() {
    return {
      titleText: '在职人员',
      titleExplain:
        '维护部门组织架构，将公司人员划分在不同的部门组织下，方便进行管理和按部门组织分配权限',
      data: [
        {
          id: 1,
          orgName: '会基科技',
          children: [
            {
              id: 11,
              orgName: '项目部',
              children: [
                { id: 13, orgName: '项目1部' },
                { id: 14, orgName: '项目2部' },
                { id: 15, orgName: '项目3部' },
              ],
            },
            {
              id: 16,
              orgName: '研发部',
              children: [
                { id: 17, orgName: '研发1部' },
                { id: 18, orgName: '研发2部' },
                { id: 19, orgName: '研发3部' },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'orgName',
      },
      chosedPartment: '会基科技',
      parmentPerson: 128,
      filterField: {
        noCard: false,
        noPaper: false,
      },
      tableList: [
        {
          id: 1,
          personName: '张三',
          IDCard: '422256198005011234',
          partment: '产品部',
          position: '产品经理',
          joinDate: '2020-05-01 12：00：00',
          workDate: '2020-05-01 2023-05-01',
          card: '6222021402008567582',
          reason: '',
        },
        {
          id: 2,
          personName: '张三',
          IDCard: '422256198005011234',
          partment: '产品部',
          position: '产品经理',
          joinDate: '2020-05-01 12：00：00',
          workDate: '2020-05-01 2023-05-01',
          card: '6222021402008567582',
          reason: '王二麻子',
        },
      ],
      loading: false,
      requestUrl: '',

      dialogFormVisible: false,
      addSubordinate: false,
      form: {
        modifyName: '', //修改名称
        departmentName: '', //部门名称
        departureDate: '', //离职日期
        departureReason: '', //离职原因
      },
      formLabelWidth: '80px',
      rules: {
        modifyName: [
          {
            required: true,
            message: '修改部门名称不能为空',
            trigger: 'blur',
          },
        ],
        departmentName: [
          {
            required: true,
            message: '部门名称不能为空',
            trigger: 'blur',
          },
        ],
        departureDate: [
          {
            required: true,
            message: '离职日期不能为空',
            trigger: 'blur',
          },
        ],
        departureReason: [
          {
            required: true,
            message: '离职原因不能为空',
            trigger: 'blur',
          },
        ],
      },

      showAdjustDepartment: false,
      choseImployee: [],
    }
  },
  methods: {
    addImployee() {
      this.$router.push({ name: 'employeeAddJz', query: {} })
    },
    /**
     * @name: 调整部门
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    changePartment() {
      if (this.choseImployee.length > 0) {
        this.showAdjustDepartment = true
      } else {
        this.$message({
          type: 'error',
          message: '请勾选需要调整部门的人员',
        })
      }
    },
    getTree() {
      this.axios({
        method: 'get',
        url: 'api-c/organization/expand/arch',
      })
        .then((response) => {
          // this.$refs.multipleTable.clearSelection();
          // this.treeData = response.data.result;
          // this.superiorDepartment = this.treeData[0].orgName;
          // this.parentNode.parentDepartCount =
          //     this.treeData[0].employeeCount;
          // this.filterField.companyId = this.treeData[0].companyId;
          // this.filterField.orgId = this.treeData[0].id;
          // // 加载树取消全选
          // this.isAllSelect = false;
          // // 默认展开二级
          // this.treeData.forEach(m =>{
          //     this.isOpenTree.push(m.id)
          // })
          // if(this.rightClickData.id) {
          //  this.rightClickData.id = "";
          // }
          // this.$nextTick(function() {
          //     this.$refs.pagination.getTableListData();
          //     this.$refs.tree.setCurrentKey(this.treeData[0].id);//tree默认选中第一个
          // });
          // this.rightClickData.parentId = this.treeData[0].parentId
        })
        .catch((error) => {})
    },
    changeData(data) {
      //调整部门子组件点击取消显示为false，子组件改变父组件的值
      this.showAdjustDepartment = data
    },
    handleNodeClick(data) {
      this.chosedPartment = data.orgName
      this.$message({
        message: '选中' + data.orgName,
      })
    },
    getTableList() {},
    look(item) {},
    /**
     * @name: 修改部门名称
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    editPartment() {
      this.dialogFormVisible = true
    },
    /**
     * @name: 添加下级部门
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    addNextPartment() {
      this.addSubordinate = true
    },
    /**
     * @name: 删除选中部门
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    deleteParment() {},
    closeDialog() {},
    cancel(str) {
      if (str === 'form') {
        this.dialogFormVisible = false
      } else {
        this.addSubordinate = false
      }
    },
    /**
     * @name: 保存修改
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    saveModify() {},
    /**
     * @name: 提交新增
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    addSubordinateDepart() {},
    handleSelectionChange(val) {
      this.choseImployee = []
      if (val.length) {
        val.forEach((item) => {
          this.choseImployee.push(item.id)
        })
      }
    },
    toExportImployees() {
      this.$router.push({ name: 'batchImport', query: {} })
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  top: 213px;
  &Tree {
    position: absolute;
    top: 24px;
    left: 24px;
    bottom: 24px;
    width: 240px;
    background-color: #ebf0f5;
    padding: 24px;
    overflow-y: auto;
    /deep/.el-tree {
      background-color: #ebf0f5;
    }
  }
  &Content {
    width: 100%;
    height: 100%;
    padding-left: 264px;
    &Btn {
      position: relative;
      text-align: right;
      height: 18px;
      line-height: 18px;
      font-size: 14px;

      &Info {
        position: absolute;
        height: 18px;
        top: 0;
        left: 0;
      }
      .el-link {
        color: #0070f5 !important;
      }
      .line {
        height: 16px;
        display: inline-block;
        border-left: 1px solid #0070f5;
        margin: 0 6px;
        vertical-align: middle;
      }
    }
    &Action {
      margin: 24px 0;
      /deep/ .commonBtn i {
        font-size: 18px !important;
        margin-right: 5px;
        vertical-align: middle;
      }
      .item {
        font-size: 20px;
        vertical-align: middle;
      }
    }
    &Search {
      .input {
        width: 332px;
      }
    }
  }
}
</style>
